<!-- 今日优选组件 -->
<template>
  <view class="section">
    <view class="section-header">
      <text class="section-title">今日优选</text>
      <view class="section-more" @tap="$emit('more')">
        <text class="more-text">更多推荐</text>
        <uni-icons type="arrowright" size="14" color="#999"></uni-icons>
      </view>
    </view>
    <scroll-view class="food-scroll" scroll-x>
      <view class="food-list">
        <view 
          class="food-item" 
          v-for="food in foods" 
          :key="food.id"
          @tap="$emit('select', food)"
        >
          <image :src="food.image" mode="aspectFill" class="food-image"></image>
          <view class="food-info">
            <text class="food-name">{{ food.name }}</text>
            <view class="food-price-box">
              <text class="food-price">¥{{ food.price }}</text>
              <text class="food-sales">月售{{ food.sales }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import type { Food } from '../types';

interface Props {
  foods: Food[];
}

defineProps<Props>();
defineEmits(['select', 'more']);
</script>

<style scoped>
.section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.section-more {
  display: flex;
  align-items: center;
  gap: 5rpx;
}

.more-text {
  font-size: 26rpx;
  color: #999;
}

.food-scroll {
  width: 100%;
  white-space: nowrap;
}

.food-list {
  display: inline-flex;
  gap: 20rpx;
}

.food-item {
  display: inline-block;
  width: 220rpx;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  overflow: hidden;
}

.food-image {
  width: 100%;
  height: 180rpx;
}

.food-info {
  padding: 15rpx;
}

.food-name {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.food-price-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.food-price {
  font-size: 30rpx;
  color: #ff3b30;
  font-weight: bold;
}

.food-sales {
  font-size: 24rpx;
  color: #999;
}
</style>